import { createApp } from 'vue';
import '@/styles/index.scss'; // global css
import pinia from './store';
import 'amfe-flexible';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { typewriter } from './directives/typewriter';
import echarts from './utils/echarts';
import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css';
import { router } from './router';
import {
  Button,
  Swipe,
  SwipeItem,
  Tab,
  Tabs,
  Toast,
  Field,
  Image as VanImage,
  Lazyload,
  Popup,
  List,
  Cell,
  CellGroup,
  PullRefresh,
  Icon,
  Divider,
  Grid,
  GridItem,
  Search,
  Highlight,
  Dialog,
  Empty,
  Loading,
  DropdownMenu,
  DropdownItem,
  Slider,
  NavBar,
  Popover,
  Switch,
  Overlay,
} from 'vant';
import 'vant/lib/index.css';
import './styles/reset.css';
import App from './App.vue';

const app = createApp(App);

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.use(router);
app.use(pinia);
app.use(ElementPlus);

app.config.globalProperties.$echarts = echarts;
app.provide('$echarts', echarts);

app.directive('typewriter', typewriter);

const vantComponents = [
  Button,
  Swipe,
  SwipeItem,
  Tab,
  Tabs,
  Toast,
  Field,
  CellGroup,
  VanImage,
  Lazyload,
  Popup,
  List,
  Cell,
  PullRefresh,
  Icon,
  Divider,
  Grid,
  GridItem,
  Search,
  Highlight,
  Dialog,
  Empty,
  Loading,
  DropdownMenu,
  DropdownItem,
  Slider,
  NavBar,
  Popover,
  Switch,
  Overlay,
];

vantComponents.forEach((component) => {
  app.use(component);
});

app.mount('#app');
